<template>
  <div class="L-main">
    <Header></Header>
    <div class="timeChange">
      <div
        v-for="(item, index) in timeList"
        :key="index"
        :class="{ active: type == item.code }"
        @click="addGetList(item.code)"
      >
        {{ item.name }}
      </div>
    </div>
    <div
      class="content"
      v-loading="loading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="designation">累计采样总览</div>

      <div class="box box-left">
        <div class="title">
          <div>采样条码数</div>
          <div>{{ nucleicGoodsNumsCount.nums }}</div>
        </div>
        <div class="boxInner boxOne">
          <div class="theme">
            <img
              src="../../static/icon4.png"
              style="width: 27px; height: 27px"
            />
            <span>检测结果实时预警</span>
          </div>

          <div class="listTop">
            <div class="name">阳性预警</div>
            <div class="croll">
              <vue-seamless-scroll
                :data="resultsWarningList"
                :class-option="classOption"
                class="temp-tbody"
              >
                <div
                  class="listInner"
                  v-for="(item, index) in resultsWarningList"
                  :key="index"
                >
                  <ul>
                    <li>
                      <span :title="item.code">{{ item.code }}</span>
                      <!-- <el-tooltip
						  effect="dark"
						  :content="item.samplingTime"
						  placement="top-start"
						> -->
                      <span :title="item.samplingTime">{{
                        item.samplingTime
                      }}</span>
                      <!-- </el-tooltip> -->
                      <!-- <span>{{ item.checkTime }}</span> -->
                      <span :title="item.name">{{ item.name }}</span>
                      <!-- <el-tooltip
						  effect="dark"
						  :content="item.sourceName"
						  placement="top-start"
						> -->
                      <span :title="item.sourceName">{{
                        item.sourceName
                      }}</span>
                      <!-- </el-tooltip> -->

                      <!-- <span>{{ item.checkResult }}</span> -->
                    </li>
                  </ul>
                </div>
              </vue-seamless-scroll>
              <div
                v-if="resultsWarningList.length == 0"
                style="text-align: center; color: #fff; margin-top: 20px"
              >
                暂无数据
              </div>
            </div>

            <!-- <div class="noData" v-if="resultsWarningList.length == 0">
              <img src="../../static/no-data.png" alt="" />
            </div> -->
          </div>

          <div class="listBottom">
            <div class="name">检测超时</div>
            <div class="croll">
              <vue-seamless-scroll
                :data="timeoutWarningList"
                :class-option="classOption"
                class="temp-tbody"
              >
                <div
                  class="listInner"
                  v-for="(item, index) in timeoutWarningList"
                  :key="index"
                >
                  <ul>
                    <li>
                      <span :title="item.code">{{ item.code }}</span>
                      <!-- <el-tooltip
                      effect="dark"
                      :content="item.samplingTime"
                      placement="top-start"
                    > -->
                      <span :title="item.samplingTime">{{
                        item.samplingTime
                      }}</span>
                      <!-- </el-tooltip> -->
                      <!-- <span>{{ item.checkTime }}</span> -->
                      <span :title="item.name">{{ item.name }}</span>
                      <!-- <el-tooltip
                      effect="dark"
                      :content="item.sourceName"
                      placement="top-start"
                    > -->
                      <span :title="item.sourceName">{{
                        item.sourceName
                      }}</span>
                      <!-- </el-tooltip> -->
                      <!-- <span>{{ item.checkResult }}</span> -->
                    </li>
                  </ul>
                </div>
              </vue-seamless-scroll>
              <div
                v-if="timeoutWarningList.length == 0"
                style="text-align: center; color: #fff; margin-top: 20px"
              >
                暂无数据
              </div>
            </div>
          </div>
        </div>

        <div class="boxInner boxTwo">
          <div class="theme">
            <img
              src="../../static/icon5.png"
              style="width: 25px; height: 22px"
            />
            <span>检测结果统计</span>
          </div>
          <div class="echartsBox">
            <v-chart :options="echart" class="echarts" :autoresize="true" />
          </div>
        </div>
      </div>
      <div class="box box-middle">
        <div class="title">
          <div>物品检测</div>
          <div>{{ nucleicGoodsNumsCount.goodsNum }}</div>
        </div>

        <div class="boxInner">
          <div class="theme">
            <img
              src="../../static/icon6.png"
              style="width: 27px; height: 31px"
            />
            <span>采样员累计采样排行</span>
          </div>
          <div class="list">
            <div
              class="listBox"
              v-for="(item, index) in samplingNumberList"
              :key="index"
            >
              <div class="listName">
                <span>{{ index + 1 }}</span>
                <span>{{ item.samplingName }}</span>
              </div>
              <div class="listProgress">
                <div
                  class="progress"
                  :style="
                    'width:' +
                    (maxNum1 == 0 ? 0 : (item.nums / maxNum1) * 100) +
                    '%'
                  "
                ></div>
              </div>
              <div class="progressNum">{{ item.nums }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="box box-right">
        <div class="title">
          <div>环境检测</div>
          <div>{{ nucleicGoodsNumsCount.environmentNum }}</div>
        </div>

        <div class="boxInner">
          <div class="theme">
            <img
              src="../../static/icon7.png"
              style="width: 28px; height: 28px"
            />
            <span>企业送检样品数量排行</span>
          </div>
          <div class="list">
            <div
              class="listBox"
              v-for="(item, index) in checkNumberList"
              :key="index"
            >
              <div class="listName">
                <div>
                  <span>{{ index + 1 }}</span>
                  <span>{{ item.sourceName }}</span>
                </div>
                <div>{{ item.nums }}</div>
              </div>
              <div class="listProgress">
                <!-- style样式已经修改 -->
                <div
                  class="progress"
                  :style="
                    'width:' +
                    (maxNum2 == 0 ? 0 : (item.nums / maxNum2) * 100) +
                    '%'
                  "
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 动态生成路由代码
// @route('/goodsEnvironment','goodsEnvironment')
import Header from "@/components/header/header.vue";
// import $ from 'jquery'
export default {
  components: {
    Header,
  },
  data() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    if (month < 10) {
      month = "0" + month;
    }
    if (day < 10) {
      day = "0" + day;
    }
    var nowDate = year + "-" + month + "-" + day;

    return {
      classOption: {
        step: 0.5,
      },
      nucleicGoodsNumsCount: {}, //累计采样总览字段
      samplingNumberList: [], //采样员采样累计排行
      checkNumberList: [], //企业送检数量排行
      resultsWarningList: [], //阳性预警
      timeoutWarningList: [],
      // statisticalResultList:[],
      maxNum1: 0,
      maxNum2: 0,
      loading: true,
      type: 0,
      timeList: [
        {
          name: "累计总数",
          code: 0,
        },
        {
          name: "今日",
          code: 3,
        },
        {
          name: "本周",
          code: 2,
        },
        {
          name: "本月",
          code: 1,
        },
      ],
      echart: {
        tooltip: {
          trigger: "item",
          formatter: "{b}:{c}人",
        },

        legend: {
          orient: "vertical",
          icon: "circle",
          itemWidth: 6,
          itemHeight: 6,
          right: 60,
          bottom: 10,
          itemGap: 10,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        color: ["#1250c0", "#07b8bc"],
        series: [
          {
            type: "pie",
            radius: "80%",
            center: ["40%", "50%"],
            data: [
              // { value: "", name: "" },
              // { value: "", name: "" },
              // { value: "", name: "" },
            ],
            label: {
              show: false,
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
          {
            legend: {
              show: false,
            },
            name: "",
            type: "pie",
            radius: ["90%", "91%"],
            center: ["40%", "50%"],
            itemStyle: {
              color: "#3e4a52",
            },
            label: {
              show: false,
            },
            labelLine: {
              show: false,
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 335,
                name: "",
              },
            ],
            hoverAnimation: false,
          },
        ],
      },
    };
  },
  activated() {
    // window.addEventListener("resize", this.resize);
  },

  deactivated() {
    // window.removeEventListener("resize", this.resize);
  },

  async created() {
    setTimeout(() => {
      this.loading = false;
    }, 500);
    this.nucleicGoodsNums(); //累计采样总览字段
    this.samplingNumber(); //采样员采样累计排行
    this.checkNumber(); //企业送检数量排行
    this.resultsWarning(); //阳性预警
    this.timeoutWarning();
    this.statisticalResult();
  },
  methods: {
    //累计采样总览
    nucleicGoodsNums() {
      this.$axios({
        url: "/nucleic/api/goods/nucleic/nucleicGoodsNums",
        method: "post",
        needAuth: true,
        data: {
          type: this.type,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.nucleicGoodsNumsCount = res.data;
          // console.log(this.nucleicGoodsNumsCount)
        }
      });
    },
    //采样员采样累计排行
    samplingNumber() {
      this.$axios({
        url: "/nucleic/api/goods/nucleic/samplingNumber",
        method: "post",
        needAuth: true,
        data: {
          type: this.type,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.maxNum1 = 0;
          res.data.forEach((item) => {
            this.maxNum1 += Number(item.nums);
          });
          this.samplingNumberList = res.data;
        }
      });
    },
    //企业送检数量排行
    checkNumber() {
      this.$axios({
        url: "/nucleic/api/goods/nucleic/checkNumber",
        method: "post",
        needAuth: true,
        data: {
          type: this.type,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.maxNum2 = 0;
          res.data.forEach((item) => {
            this.maxNum2 += Number(item.nums);
          });
          this.checkNumberList = res.data;
        }
      });
    },
    //阳性预警
    resultsWarning() {
      this.$axios({
        url: "/nucleic/api/goods/nucleic/resultsWarning",
        method: "post",
        needAuth: true,
        data: {
          type: this.type,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.resultsWarningList = res.data;
          //  this.$nextTick(() => {
          //   jQuery("#inoculate").slide({
          //     mainCell: "ul",
          //     autoPlay: true,
          //     effect: "topMarquee",
          //     vis: 4,
          //     interTime: 40,
          //     trigger: "click",
          //   });
          // });
        }
      });
    },
    //检测超时
    timeoutWarning() {
      this.$axios({
        url: "/nucleic/api/goods/nucleic/timeoutWarning",
        method: "post",
        needAuth: true,
        data: {
          type: this.type,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.timeoutWarningList = res.data;
        }
      });
    },
    //检测结果统计
    statisticalResult() {
      this.$axios({
        url: "/nucleic/api/goods/nucleic/statisticalResult",
        method: "post",
        needAuth: true,
        data: {
          type: this.type,
        },
      }).then((res) => {
        if (res.code == 200) {
          // this.statisticalResultList = res.data;
          var checkResult = [],
            nums = [];
          var arr = [];
          res.data.forEach((item, index) => {
            var arr1 = {
              value: "",
              name: "",
            };
            arr1.value = item.nums;
            arr1.name = item.checkResult;
            arr.push(arr1);
          });
          console.log(arr);
          this.echart.series[0].data = arr;
          console.log(nums);
          console.log(this.echart.series[0].data.name);
        }
      });
    },
    addGetList(type) {
      this.type = type;
      this.nucleicGoodsNums(); //累计采样总览字段
      this.samplingNumber(); //采样员采样累计排行
      this.checkNumber(); //企业送检数量排行
      this.resultsWarning(); //阳性预警
      this.timeoutWarning();
      this.statisticalResult();
    },
    // samplingNumber(){
    //   this.$axios({
    //     url:'',
    //     methods:'',
    //     needAuth=true,
    //   }).then((res)=>{
    //     if(res.dode==200){

    //     }
    //   })
    // }
  },
};
</script>
<style scoped lang="less">
.L-main {
  //   background: url("../../static/bg.png") no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .noData {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      height: 130px;
      width: 130px;
    }
  }

  .timeChange {
    display: flex;
    padding: 30px 0;
    padding-left: 40px;
    cursor: pointer;
    div {
      color: rgba(255, 255, 255, 0.5);
      font-size: 14px;
      width: 105px;
      height: 31px;
      background-color: rgba(0, 226, 227, 0.2);
      border-radius: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 50px;
    }
    .active {
      color: #fff;
      background-color: rgba(0, 226, 227, 0.5);
    }
  }

  .content {
    color: #f0f0f0;
    flex: 1;
    overflow: hidden;
    display: flex;
    padding: 60px 40px 50px 40px;
    position: relative;
    .designation {
      position: absolute;
      font-size: 24px;
      color: #f0f0f0;
      top: 0;
      left: 0;
      right: 0;
      text-align: center;
      font-weight: bold;
    }
    .box {
      flex: 1;
      overflow: hidden;
      .title {
        color: #f0f0f0;
        height: 100px;
        background-color: rgba(41, 49, 64, 0.2);
        border: solid 1px rgba(20, 206, 214, 0.2);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding-left: 40px;
        div {
          &:nth-child(1) {
            font-size: 16px;
            margin-right: 30px;
          }
          &:nth-child(2) {
            color: #00f9f9;
            font-size: 32px;
            &::after {
              content: "个";
              color: #00f9f9;
              font-size: 16px;
            }
          }
        }
      }
      .boxInner {
        .theme {
          height: 50px;
          font-size: 18px;
          color: #f0f0f0;
          display: flex;
          align-items: center;
          margin-top: 20px;
          img {
            margin-right: 14px;
          }
        }
      }
    }
    .box-left {
      margin-right: 40px;
      display: flex;
      flex-direction: column;
      .boxOne {
        .listTop,
        .listBottom {
          margin-top: 14px;
          .name {
            color: #e61a29;
            font-size: 18px;
          }
          .croll {
            height: 100px;
            overflow-y: scroll;
            &::-webkit-scrollbar {
              width: 8px;
              height: 57px;
              background-color: transparent;
            }
            &::-webkit-scrollbar-track {
              border-radius: 4px;
              background-color: transparent;
            }
            &::-webkit-scrollbar-thumb {
              border-radius: 4px;
              background: #283345;
            }
            .listInner {
              margin-top: 8px;
              ul {
                li {
                  display: flex;
                  padding: 6px 0;
                  height: 30px;
                  span {
                    flex: 1;
                    margin-left: 5px;
                    text-align: center;
                    display: inline-block;
                    font-weight: normal;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                  }
                }
              }
            }
          }
        }
        .listBottom {
          .name {
            color: #efa923;
          }
        }
      }
      .boxTwo {
        flex: 1;
        display: flex;
        flex-direction: column;
        .echartsBox {
          flex: 1;
          .echarts {
            height: 100%;
            width: 100%;
          }
        }
      }
    }
    .box-middle {
      margin-right: 40px;
      display: flex;
      flex-direction: column;
      .boxInner {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .list {
        //   background: red;
        flex: 1;
        overflow-y: scroll;
        overflow-x: hidden;
        padding-right: 30px;
        margin-top: 20px;
        &::-webkit-scrollbar {
          width: 5px;
          height: 57px;
          background-color: #5db0ff;
        }
        &::-webkit-scrollbar-track {
          border-radius: 3px;
          background-color: #094380;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 3px;
          background: #5db0ff;
        }
        .listBox {
          display: flex;
          align-items: center;
          margin-bottom: 30px;
          .listName {
            display: flex;
            align-items: center;
            width: 80px;
            margin-right: 20px;
            span {
              &:nth-child(1) {
                width: 16px;
                height: 16px;
                background-image: linear-gradient(
                    -90deg,
                    #4480fb 0%,
                    #71dfff 100%
                  ),
                  linear-gradient(#1c95f2, #1c95f2);
                background-blend-mode: normal, normal;
                color: #fff;
                font-size: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                margin-right: 6px;
              }
              &:nth-child(2) {
                color: #f0f0f0;
                font-size: 14px;
              }
            }
          }
          .listProgress {
            overflow: hidden;
            flex: 1;
            height: 12px;
            background-color: rgba(197, 209, 248, 0.2);
            border-radius: 6px;
            position: relative;
            .progress {
              // width: 50%;
              height: 100%;
              background-image: linear-gradient(90deg, #105aff 0%, #15edf8 100%),
                linear-gradient(#61d5bb, #61d5bb);
              background-blend-mode: normal, normal;
              border-radius: 6px;
            }
          }

          &:nth-of-type(1) {
            .listName {
              span {
                &:nth-child(1) {
                  background-image: linear-gradient(
                      90deg,
                      #ec7777 0%,
                      #f4152a 100%
                    ),
                    linear-gradient(#1c95f2, #1c95f2);
                  background-blend-mode: normal, normal;
                }
              }
            }
          }
          &:nth-of-type(2) {
            .listName {
              span {
                &:nth-child(1) {
                  background-image: linear-gradient(
                      -90deg,
                      #fd4107 0%,
                      #ffb490 100%
                    ),
                    linear-gradient(#1c95f2, #1c95f2);
                  background-blend-mode: normal, normal;
                }
              }
            }
          }
          &:nth-of-type(3) {
            .listName {
              span {
                &:nth-child(1) {
                  background-image: linear-gradient(
                      -90deg,
                      #f68d0c 0%,
                      #fedaad 100%
                    ),
                    linear-gradient(#1c95f2, #1c95f2);
                  background-blend-mode: normal, normal;
                }
              }
            }
          }
        }
      }
    }
    .box-right {
      display: flex;
      flex-direction: column;
      .boxInner {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .list {
        //   background: red;
        flex: 1;
        overflow-y: scroll;
        overflow-x: hidden;
        padding-right: 30px;
        margin-top: 20px;
        &::-webkit-scrollbar {
          width: 5px;
          height: 57px;
          background-color: #5db0ff;
        }
        &::-webkit-scrollbar-track {
          border-radius: 3px;
          background-color: #094380;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 3px;
          background: #5db0ff;
        }
        .listBox {
          display: flex;
          margin-bottom: 30px;
          flex-direction: column;
          .listName {
            display: flex;
            justify-content: space-between;
            div {
              &:nth-child(1) {
                display: flex;
                span {
                  &:nth-child(1) {
                    width: 16px;
                    height: 16px;
                    background-image: linear-gradient(
                        -90deg,
                        #4480fb 0%,
                        #71dfff 100%
                      ),
                      linear-gradient(#1c95f2, #1c95f2);
                    background-blend-mode: normal, normal;
                    color: #fff;
                    font-size: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 50%;
                    margin-right: 6px;
                    margin-bottom: 12px;
                  }
                  &:nth-child(2) {
                    color: #f0f0f0;
                    font-size: 14px;
                  }
                }
              }

              &:nth-child(2) {
                font-size: 14px;
              }
            }
          }
          .listProgress {
            width: 100%;
            height: 12px;
            background-color: rgba(197, 209, 248, 0.2);
            border-radius: 6px;
            position: relative;
            .progress {
              height: 100%;
              background-image: linear-gradient(90deg, #22bfd8 0%, #43d8a9 100%),
                linear-gradient(#e9346d, #e9346d);
              background-blend-mode: normal, normal;
              border-radius: 6px;
            }
            .progressNum {
              position: absolute;
              left: 100px;
              font-size: 14px;
              line-height: 14px;
            }
          }

          &:nth-of-type(1) {
            .listName {
              div {
                &:nth-child(1) {
                  span {
                    &:nth-child(1) {
                      background-image: linear-gradient(
                          90deg,
                          #ec7777 0%,
                          #f4152a 100%
                        ),
                        linear-gradient(#1c95f2, #1c95f2);
                      background-blend-mode: normal, normal;
                    }
                  }
                }
              }
            }
          }
          &:nth-of-type(2) {
            .listName {
              div {
                &:nth-child(1) {
                  span {
                    &:nth-child(1) {
                      background-image: linear-gradient(
                          -90deg,
                          #fd4107 0%,
                          #ffb490 100%
                        ),
                        linear-gradient(#1c95f2, #1c95f2);
                      background-blend-mode: normal, normal;
                    }
                  }
                }
              }
            }
          }
          &:nth-of-type(3) {
            .listName {
              div {
                &:nth-child(1) {
                  span {
                    &:nth-child(1) {
                      background-image: linear-gradient(
                          -90deg,
                          #f68d0c 0%,
                          #fedaad 100%
                        ),
                        linear-gradient(#1c95f2, #1c95f2);
                      background-blend-mode: normal, normal;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>